<template>
  <div
    :id="id"
    :style="{
      width: width,
      height: height
    }"
    v-echart-resize
  ></div>
</template>

<script setup>
import { defineProps, onMounted, onUnmounted, ref } from 'vue'
import * as echarts from 'echarts'
import { unwarp } from '@/utils/commUtils'

const props = defineProps({
  id: {
    type: String,
    default: ''
  },
  width: {
    type: String,
    default: '100%'
  },
  height: {
    type: String,
    default: '100%'
  }
})
const chart = ref(null)
const setOptions = () => {
  const data = [
    {
      name: '平安街道',
      value: 225
    },
    {
      name: '幸福街道',
      value: 165
    },
    {
      name: '富强街道',
      value: 116
    },
    {
      name: '民主街道',
      value: 92
    },
    {
      name: '和平街道',
      value: 82
    }
  ]
  const arrName = getArrayValue(data, 'name')
  let sumValue = 0
  data.forEach((e) => (sumValue += e.value))
  const optionData = getData(data)
  function getArrayValue(array, key) {
    const key1 = key || 'value'
    const res = []
    if (array) {
      array.forEach(function (t) {
        res.push(t[key1])
      })
    }
    return res
  }

  function getData(data) {
    const res = {
      series: [],
      yAxis: []
    }
    for (let i = 0; i < data.length; i++) {
      res.series.push({
        name: '路灯数',
        type: 'pie',
        clockWise: true, //顺时加载
        hoverAnimation: false, //鼠标移入变大
        radius: [98 - i * 12 + '%', 90 - i * 12 + '%'],
        center: ['30%', '50%'],
        label: {
          show: false
        },
        itemStyle: {
          label: {
            show: false
          },
          labelLine: {
            show: false
          },
          borderWidth: 5
        },
        data: [
          {
            value: data[i].value,
            name: data[i].name
          },
          {
            value: sumValue - data[i].value,
            name: '',
            itemStyle: {
              color: 'rgba(0,0,0,0)',
              borderWidth: 0
            },
            tooltip: {
              show: false
            },
            hoverAnimation: false
          }
        ]
      })
      res.series.push({
        name: '',
        type: 'pie',
        silent: true,
        z: 1,
        clockWise: false, //顺时加载
        hoverAnimation: false, //鼠标移入变大
        radius: [98 - i * 12 + '%', 90 - i * 12 + '%'],
        center: ['30%', '50%'],
        label: {
          show: false
        },
        itemStyle: {
          label: {
            show: false
          },
          labelLine: {
            show: false
          },
          borderWidth: 5
        },
        data: [
          {
            value: 2.5,
            itemStyle: {
              color: 'rgba(0,0,0,0)',
              borderWidth: 0
            },
            tooltip: {
              show: false
            },
            hoverAnimation: false
          },
          {
            value: 7.5,
            name: '',
            itemStyle: {
              color: 'rgba(0,0,0,0.38)',
              borderWidth: 0
            },
            tooltip: {
              show: false
            },
            hoverAnimation: false
          }
        ]
      })
      res.yAxis.push(data[i].value)
    }
    return res
  }
  const option = {
    legend: {
      show: true,
      top: 'center',
      left: '62%',
      icon: 'circle',
      data: arrName,
      itemWidth: 20,
      itemHeight: 15,
      width: 40,
      padding: [0, 5],
      itemGap: 10,
      formatter: function (name) {
        return name
      },
      textStyle: {
        color: '#fff',
        fontSize: 12,
        fontStyle: 'italic',
        fontFamily: 'FZHei-B01'
      }
    },
    tooltip: {
      show: true,
      trigger: 'item',
      formatter: '{a}<br>{b}:{c}'
    },
    color: ['#DC7C15', '#DC7C15', '#E1A635', '#F8F625', '#D6F95C'],
    grid: {
      top: '2%',
      bottom: '69%',
      left: '31%',
      containLabel: false
    },
    yAxis: [
      {
        type: 'category',
        inverse: true,
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          interval: 0,
          inside: false,
          textStyle: {
            color: '#fff',
            fontSize: 10,
            fontStyle: 'italic',
            lineHeight: 20
          },
          show: true
        },
        data: optionData.yAxis
      }
    ],
    xAxis: [
      {
        show: false
      }
    ],
    series: optionData.series
  }
  unwarp(chart.value).setOption(option)
}

const initChart = () => {
  setTimeout(() => {
    if (!chart.value) {
      chart.value = echarts.init(document.getElementById(props.id))
    }
    setOptions()
  }, 0)
}

onMounted(() => {
  initChart()
})

onUnmounted(() => {
  if (!chart.value) {
    return
  }
  chart.value.dispose()
  chart.value = null
})
</script>

<style lang="scss" scoped>
</style>
